<template>
  <el-container class="back">
    <el-main>
      <el-form ref="form" :model="form" label-width="80px" class="form-class">
        <el-form-item label="用户名">
          <el-input v-model="form.username" aria-autocomplete="true"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="form.password"
            type="password"
            aria-autocomplete="true"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
          <el-button @click="clearSubmit">清空</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    onSubmit() {
      const _this = this;
      this.$axios
        .post("/login", this.form)
        .then((res) => {
          //登录成功要通过store把数据共享出去
          console.log(res.data);
          const jwt = res.headers.authorization;
          const userInfo = res.data.data;

          _this.$store.commit("SET_TOKEN", jwt);
          _this.$store.commit("SET_USERINFO", userInfo);

          _this.$router.push("/blogs");
        })
        .catch((err) => {
          console.error(err);
        });
    },
    clearSubmit() {
      this.form = [];
    },
  },
};
</script>

<style>
.el-main {
  color: #333;
  text-align: center;
  line-height: 160px;
}
.form-class {
  box-shadow: 0px 0px 5px rgb(219, 219, 219);
  margin: auto;
  margin-top: 300px;
  max-width: 400px;
  padding-top: 60px;
  padding-right: 50px;
  border: 2px solid rgb(201, 201, 201);

  
}
.form-title {
  border: 1px solid red;
}
</style>